<template>
  <div class="s-box">
    <div class="userInfo-content">
      <avatar :src="user.avatar" boxWidth="2rem" boxHeight="2rem"></avatar>
    </div>
    <div class="userInfo-content">
      <span class="text-large">{{user.username}}</span>
      <x-button mini :gradients="['#8590fb', '#4cc2d7']" :show-loading="followLoading" class="follow-button"
                @click.native="toggleFollow">
        <!--<x-button mini :gradients="['#FF2719', '#FF61AD']" class="follow-button" @click.native="toggleFollow">-->
        <span v-show="!followLoading">
          {{isSubscribe ? '已订阅' : '+订阅'}}
        </span>
      </x-button>
    </div>
    <div class="userInfo-content">
      <span class="text-small">{{user.shortIntroduction}}</span>
    </div>
    <div class="userInfo-content profit-content">
      <div class="userInfo-item">
        <span>今日收益</span>
        <br>
        <span :class="[user.todayProfitPercent<0?'text-green':'text-red']">{{(user.todayProfitPercent || 0 ) | formatPlusMinus}}%</span>
      </div>
      <div class="userInfo-item">
        <span>预期年化</span>
        <br>
        <span>{{user.expectYearProfitPercent || 0}}%</span>
      </div>
      <div class="userInfo-item">
        <span>订阅数</span>
        <br>
        <span>{{user.subscribeCount || 0}}</span>
      </div>
    </div>
    <load-more tip="用户操作" :show-loading="operationLoading" background-color="#fbf9fe"></load-more>
    <x-table v-show="!operationLoading">
      <thead>
      <tr>
        <th>平台</th>
        <th>产品名</th>
        <th>操作</th>
        <th>时间</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item,index) in otherOperation" :key="index" @click="followBuy(item)">
        <td>{{item.platformName}}</td>
        <td>{{item.productName}}</td>
        <td>{{item.isPurchase === '1' ? '买入' : '卖出'}}{{item.amount}}元</td>
        <td>{{item.createTime | formatDate}}</td>
      </tr>
      </tbody>
    </x-table>
  </div>
</template>

<script>
  import Avatar from '@/components/Avatar'
  import {XTable, LoadMore, dateFormat, XButton} from 'vux'

  export default {
    components: {
      Avatar,
      XTable,
      LoadMore,
      XButton
    },
    data() {
      return {
        user: {},
        isSubscribe: false,
        otherOperation: {},
        operationLoading: true,
        userId: this.$route.params.id,
        followLoading: false
      }
    },
    created() {
      this.axios.all([this.getOtherUser(), this.getMyOperation()]).then(this.axios.spread(function (acct, perms) {

      }));
    },
    filters: {
      formatDate(str) {
        return dateFormat(new Date(str), 'YYYY-MM-DD')
      }
    },
    methods: {
      followBuy(item) {
        this.$router.push({
          path: '/user/positionBusiness',
          query: {
            myPositionId: item.myPositionId,
            type:'buy'
          }
        })
      },
      toggleFollow() {
        this.followLoading = true;
        if (!this.isSubscribe) {
          this.$api.subscribe({
            awesomeId: this.userId
          }).then((data) => {
            if (data.returnCode === 1) {
              this.$vux.toast.show({
                position: 'top',
                text: data.returnMsg,
                isShowMask: true,
                width: '4rem'
              });
              this.isSubscribe = !this.isSubscribe
            }
          })
        } else {
          this.$api.cancelSubscribe({
            awesomeId: this.userId
          }).then((data) => {
            if (data.returnCode === 1) {
              this.$vux.toast.show({
                position: 'top',
                text: data.returnMsg,
                isShowMask: true,
                width: '4rem'
              });
              this.isSubscribe = !this.isSubscribe

            }
          })
        }
        this.followLoading = false;

      },
      getOtherUser() {
        this.$api.getOtherUser({
          userId: this.userId
        }).then((data) => {
          this.user = data.user;
          this.isSubscribe = data.isSubscribe;
        })
      },
      getMyOperation() {
        this.$api.getOtherOperation({
          userId: this.userId
        }).then((data) => {
          this.otherOperation = data.myOperationList;
          this.operationLoading = false;
        })
      },
    }
  }
</script>

<style lang="less" scoped>
  table {
    font-size: .3rem;
  }

  .userInfo-content {
    text-align: center;
    margin-top: .2rem;
    font-size: 0;
    position: relative;
    &:first-child {
      margin-top: .48rem;
    }
    .follow-button {
      position: absolute;
      right: 2rem;
      top: -.1rem;
    }
    .userInfo-item {
      display: inline-block;
      width: 33%;
      &:not(:first-child) {
        border-left: 1px solid #f1f1f1;
      }
    }
  }

  .profit-content {
    border-top: 1px solid #f1f1f1;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    height: 1.6rem;
    align-items: center;
    justify-content: center;
    font-size: 0;
    span {
      font-size: .3rem;
    }
  }
</style>
